<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="李愧愧">
    <title></title>
    <style>
        body{
            /* 移动时它会超出页面 */
            overflow: hidden;
        }
        
        button {
            display: block;
            margin: 20px auto;
            width: 100px;
            height: 30px;
            line-height: 30px;
            background-color: #fff;
            outline: none;
            border: 1px solid gray;
            cursor: pointer;
        }

        /* 弹出框 */
        .box {                                          
            /* 使用margin 会影响它移动的效果 */
            /* margin: 250px auto; */
            width: 500px;
            height: 200px;
            border: 2px solid #ff9900;
            display: none;
            background-color: #fff;
            /* 在这一题绝对定位和相对定位都没问题 */
            /* 绝对定位 */
            position: absolute;
            top: calc(50% - 100px);
            left:calc(50% - 250px);
            cursor: pointer;
            display: none;
        }

        /* 弹出框上半部分 */
        .box1 {
            height: 50px;
            background-color: #ffcc00;
            border-bottom: 2px solid #ff9900;
        }

        /* 弹出框X */
        i {
            display: block;
            color: sienna;
            font-size: 20px;
            font-weight: bolder;
            font-style: normal;
            float: right;
            margin-top: 15px;
            margin-right: 10px;
            cursor: pointer;
        }

        /* 遮罩框设置 */
        .zzc {
            /* 绝对定位(脱离文档流) */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0.4;
        }
    </style>
</head>

<body>
    <button>弹出框</button>
    <!-- 遮罩层：一个绝对定位(脱离文档流)的层（通常使用DIV），设置它的宽度和高度以致能覆盖整个屏幕 -->
    <div class="all">
        <!-- 弹出框 -->
        <div class="box">
            <div class="box1">
                <i>X</i>
            </div>
        </div>
    </div>
    <!-- 撑开页面 -->
    <!-- p{$$}*99 -->
    <script>
        // 获取button
        var button = document.querySelector('button');
        console.log(button);

        // 获取弹出框
        var box = document.querySelector('.box');
        console.log(box);

        // 获取遮罩层
        var all = document.querySelector('.all');
        console.log(all);

        // 获取X
        var x = document.querySelector('i');

        // 当button被点击时
        button.onclick = function (ev) {
            button.style = 'background-color: #e5e5e5;';

            box.style = 'display: block;'
            // 添加遮罩层
            all.classList.add('zzc');
        }

        // 鼠标按下触发的事件
        box.onmousedown = function (ev) {
            // 记录点击时的偏移量 
            // offsetX offsetY相对于box(被点击的元素)
            var offsetX = ev.offsetX;
            var offsetY = ev.offsetY;
            // 鼠标移动的时候触发的事件
            document.onmousemove = function (mv) {
                // 让box相对于页面移动
                // 左右
                box.style.left = mv.pageX - offsetX + 'px';
                // 上下
                box.style.top = mv.pageY - offsetY + 'px';
            }
        }
        
        // 鼠标松开的时候触发的事件
        box.onmouseup = function () {
            document.onmousemove = null;
        }
        x.onclick=function(){
            // 移除遮罩层
            all.classList.remove('zzc');
            // 弹出框消失
            box.style = 'display: none;'
            // 按钮背景颜色变换
            button.style = 'background-color: #fff;';
        }
        // 自己写的时候遇到的问题
    </script>
</body>

</html>